<template>
  <up-overlay :show="show">
    <view class="login-box">
      <image class="box-ip" src="https://cbandu.oss-cn-qingdao.aliyuncs.com/yusj/20250516/model_ip.png" />
      <view class="confirm-box">
        <view class="box-title">
          您还未登录，现在去登录吧
        </view>

        <view class="box-btn">
          <view class="btn-item" @click="handleClose">
            再想想
          </view>
          <view class="btn-item btn-right" @click="handleLogin">
            立即登录
          </view>
        </view>
      </view>
    </view>
  </up-overlay>
</template>

<script lang="ts" setup>
defineOptions({
  options: {
    styleIsolation: 'shared',
  },
});

defineProps({
  show: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(['update:show', 'close']);

const handleClose = () => {
  emit('update:show', false);
};

const handleLogin = () => {
  emit('update:show', false);
  uni.navigateTo({
    url: '/pages/views/login/index',
  });
};
</script>

<style lang="scss" scoped>
.login-box {
  position: relative;
  width: 630rpx;
  padding-top: 169rpx;

  .box-ip {
    position: absolute;
    left: 133rpx;
    top: 0;
    width: 336rpx;
    height: 228rpx;
  }
}

.confirm-box {
  position: relative;
  width: 630rpx;
  padding: 44rpx 40rpx;
  border-radius: 32rpx;
  overflow: hidden;
  background: #fff;

  .box-title {
    padding: 60rpx 0 80rpx 0;
    font-size: 36rpx;
    color: #0F194D;
    line-height: 54rpx;
    text-align: center;
  }

  .box-btn {
    display: flex;
    justify-content: space-between;

    .btn-item {
      width: 256rpx;
      color: #FFFFFF;
      text-align: center;
      font-weight: bold;
      font-size: 32rpx;
      line-height: 80rpx;
      border-radius: 40rpx;
      background: #E2E2E2;
    }

    .btn-right {
      background: linear-gradient( 90deg, #FFA029 0%, #FFCD29 100%);
    }
  }
}
</style>

<style lang="css">
.u-transition {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
